<script>
import {
  biographicalNotesExcel,
  associationPositionList,
  biographicalNotesConnectRecord,
  connectRecordSave,
} from "@/http/api";
import { ElMessage, ElMessageBox } from "element-plus";

import ChineseHelper from "@/utils/ChineseHelpr.js";
import talkForm from "@/views/modules/talkForm.vue";

export default {
  components: { talkForm },
  name: "",
  data() {
    return {
      showTalk: false,
      navArr: [
        { name: "标准简历", id: 0 },
        { name: "简历附件", id: 1 },
        { name: "备选岗位", id: 2 },
      ],

      navId: 0,
      formData: "",
      talkArr: [],
      talkTotal: 0,
      talkQury: {
        page: 1,
        per_page: 10,
        biographical_notes_id: "",
      },
      has_zdArr: [],
      disNumArr: [
        "江证",
        "健康证(海事)",
        "健康证(卫检)",
        "接种证(霍乱)",
        "接种证(黄热)",
      ],
      zs_english: [
        { name: "身份证号码", value: "ID No." },
        { name: "护照号码", value: "Passport No." },
        { name: "海员证号码", value: "seafarer‘s passport No." },
        { name: "适任证书号码", value: "Certificate of Competency No." },
        { name: "服务薄号码", value: "seafarer's identity document No." },
        { name: "海船船员培训合格证书", value: "Cert. of proficiency No." },
        { name: "特殊专业培训证书", value: "Special Training Certificate No." },
        { name: "船舶保安员证书", value: "SSO Cert." },
        { name: "江证", value: "YZ river nav. qualification cert " },
        { name: "外籍证书", value: "Foreign License" },
        { name: "健康证(海事)", value: "Health Cert. MSA" },
        { name: "健康证(卫检)", value: "Health Cert. Quarantine" },
        { name: "接种证(霍乱)", value: "Vaccination Cert. Cholera" },
        { name: "接种证(黄热)", value: "Vaccination Cert. Yellow fever" },
      ],
      zw_english: [
        { name: "船长", value: "CAPT" },
        { name: "大副", value: "C/O" },
        { name: "二副", value: "2/O" },
        { name: "三副", value: "3/O" },
        { name: "驾助", value: "J/O" },
        { name: "GMDSS普操员", value: "GMDSS operator" },
        { name: "轮机长", value: "C/E" },
        { name: "大管轮", value: "2/E" },
        { name: "二管轮", value: "3/E" },
        { name: "三管轮", value: "4/E" },
        { name: "轮助", value: "J/E" },
        { name: "电子员", value: "E/O" },
        { name: "电工", value: "E/T" },
        { name: "水手长", value: "BSN" },
        { name: "木匠", value: "CARPT" },
        { name: "高水", value: "S/AB" },
        { name: "水手", value: "AB" },
        { name: "甲板实习生", value: "D/CDT" },
        { name: "机工长", value: "CH/MM" },
        { name: "修理工", value: "FTR" },
        { name: "高机", value: "S/MM" },
        { name: "机工", value: "MM" },
        { name: "机舱实习生", value: "E/CDT" },
        { name: "管事", value: "CH/STWD" },
        { name: "大厨", value: "CH/CK" },
        { name: "大台", value: "STEWARD" },
        { name: "二厨", value: "COOK" },
      ],
      tableData: [],
      total: 0,
      queryData: {
        biographical_notes_id: "",
        page: 1,
        per_page: 20,
      },
    };
  },
  props: {
    viewItem: {},
  },
  setup() {},
  methods: {
    linkFn(url, id, navId) {
      if (id != 0) {
        this.$router.push({ path: url, query: { id: id, navId: navId } });
      }
    },
    getZwEnglish(name) {
      let result = this.zw_english.filter((item) => {
        return item.name == name;
      });
      return result[0]?.value;
    },
    getZsEnglish(name) {
      let result = this.zs_english.filter((item) => {
        return item.name == name;
      });
      return result[0]?.value;
    },
    changeStr(str) {
      return ChineseHelper.ConvertPinyin(str);
    },
    navFn(item) {
      this.navId = item.id;
    },
    getData() {
      biographicalNotesExcel({
        biographical_notes_id: this.viewItem.biographical_notes_id,
      }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.has_zdArr = res.data.data.zs_json.filter((item) => {
            return item.number || item.time;
          });
          // this.has_zdArr = res.data.data.zs_json;
        }
      });
    },

    async getLinkWork() {
      const { data } = await associationPositionList(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    serchFn() {
      this.getLinkWork();
    },
    async getTalk() {
      const { data } = await biographicalNotesConnectRecord(this.talkQury);
      if (data.code == 1) {
        this.talkArr = data.data.data;
        this.talkTotal = data.data.total;
      }
    },
    talkFn() {
      this.maskItem = {
        biographical_notes_id: this.viewItem.biographical_notes_id,
      };
      this.showTalk = true;
    },
    async comfirFn(formData) {
      const { data } = await connectRecordSave(formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "操作成功",
        });
        this.showTalk = false;
        this.getTalk();
      }
    },
  },
  mounted() {},
  created() {
    if (!this.viewItem.file_url) {
      this.navArr = [
        { name: "标准简历", id: 0 },
        { name: "备选岗位", id: 2 },
      ];
    }
    this.getData();
    this.queryData.biographical_notes_id = this.viewItem.biographical_notes_id;
    this.talkQury.biographical_notes_id = this.viewItem.biographical_notes_id;
    this.getLinkWork();
    this.getTalk();
  },
};
</script>
<template>
  <div class="viewCont">
    <div class="stepNav">
      <div
        :class="navId === item.id ? 'stepItemActive' : 'stepItem'"
        @click="navFn(item)"
        :key="index"
        v-for="(item, index) in navArr"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="viewMain">
      <div class="viewLeft">
        <div class="tableCont_" v-if="formData && navId == 0">
          <div class="tableName flexCont">
            <div>船员推荐表</div>
          </div>
          <div class="syCont">
            <el-watermark :width="120" :height="120" image="/img/sy_img.png">
              <div class="exportTable">
                <div class="exportHead">
                  <div class="logoImg">
                    <img :src="formData.enterprise_info.enterprise_logo" />
                  </div>
                  <div class="exportHeadInfo">
                    <div class="exportHeadName">
                      {{ formData.enterprise_info.enterprise_name }}
                    </div>
                    <div
                      class="englishName"
                      v-if="formData.enterprise_info.enterprise_english_name"
                    >
                      {{ formData.enterprise_info.enterprise_english_name }}
                    </div>
                    <div
                      class="exportHeadAddress"
                      v-if="formData.enterprise_info.enterprise_address"
                    >
                      地址：{{ formData.enterprise_info.enterprise_address }}
                    </div>
                  </div>
                </div>
                <el-divider content-position="center"
                  >船员推荐表/SEAFARER'S APPLICATION FORM</el-divider
                >
                <div class="tableHead">
                  <div class="tableTr pullHead">
                    <div>个人信息</div>
                    <div>PERSONAL INFORMATION</div>
                  </div>
                </div>
                <div class="tableBody flexBody">
                  <div class="tableleft">
                    <div class="tableTop">
                      <div class="tableInfoItem tableInfoItem_">
                        <div class="tableInfoItemName">
                          <div>姓名</div>
                          <div>Name</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.real_name }}</div>
                          <div v-if="formData.real_name">
                            {{ changeStr(formData.real_name) }}
                          </div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>职务</div>
                          <div>Rank</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.zw }}</div>
                          <div>{{ getZwEnglish(formData.zw) }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>国籍</div>
                          <div>Nat</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.gj }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem tableInfoItem_">
                        <div class="tableInfoItemName">
                          <div>出生日期</div>
                          <div>Date of Birth</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.birthday_time }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>出生地</div>
                          <div>Birthplace</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.csd }}</div>
                          <div v-if="formData.csd">
                            {{ changeStr(formData.csd) }}
                          </div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>电话</div>
                          <div>Mobile</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.mobile }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="tableUnder">
                      <div class="tableInfoItem tableInfoItem_">
                        <div class="tableInfoItemName">
                          <div>英语水平</div>
                          <div>English proficiency</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.yysp }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem pullItem">
                        <div class="tableInfoItemName">
                          <div>住址</div>
                          <div>Address</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>
                            {{ formData.jg }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tableUserImg">
                    <img
                      v-if="formData.gr_photo"
                      :src="formData.gr_photo.split(',')[0]"
                    />
                  </div>
                </div>
                <div class="tableHead">
                  <div class="tableTr tableTr_">
                    <div>教育背景</div>
                    <div>EDUCATION</div>
                  </div>
                  <div class="tableTr hasLeft">
                    <div>紧急联系人</div>
                    <div>Emergency contact</div>
                  </div>
                  <div class="tableTr hasLeft">
                    <div>其他信息</div>
                    <div>Other Info</div>
                  </div>
                </div>
                <div class="tableBody flexBody">
                  <div class="tableleft">
                    <div class="tableTop">
                      <div class="tableInfoItem tableInfoItem_">
                        <div class="tableInfoItemName">
                          <div>学校</div>
                          <div>College</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.byyx }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>家属姓名</div>
                          <div>Family Name</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.jjlxr_name }}</div>
                          <div v-if="formData.jjlxr_name">
                            {{ changeStr(formData.jjlxr_name) }}
                          </div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>身高/体重</div>
                          <div>Height/Weight</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>
                            {{ formData.height }}CM/{{ formData.weight }}KG
                          </div>
                        </div>
                      </div>
                      <div class="tableInfoItem tableInfoItem_">
                        <div class="tableInfoItemName">
                          <div>学历</div>
                          <div>Degree</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.xl }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>家属关系</div>
                          <div>Relationship</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.jjlxr_gx }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>工服尺寸/鞋码</div>
                          <div>Boiler Suit/Shoes</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>
                            {{ formData.gfcc }}/{{ formData.shoe_size }}码
                          </div>
                        </div>
                      </div>
                      <div class="tableInfoItem tableInfoItem_">
                        <div class="tableInfoItemName">
                          <div>毕业日期</div>
                          <div>Date of Graduation</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.bysj }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>紧急人电话</div>
                          <div>Tel</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.jjlxr_mobile }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>血型</div>
                          <div>blood</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ formData.blood_type }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tableHead">
                  <div class="tableTr pullHead">
                    <div>证书情况</div>
                    <div>CERTIFICATES</div>
                  </div>
                </div>
                <div class="tableBody flexBody">
                  <div class="tableleft">
                    <div
                      class="tableTop"
                      :key="index"
                      v-for="(item, index) in has_zdArr"
                    >
                      <div
                        :class="
                          disNumArr.includes(item.name)
                            ? 'tableInfoItem tableInfoItem_pull'
                            : 'tableInfoItem tableInfoItem_'
                        "
                      >
                        <div class="tableInfoItemName">
                          <div>证件名称</div>
                          <div>Name of certificate</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ item.name }}</div>
                          <div>{{ getZsEnglish(item.name) }}</div>
                        </div>
                      </div>
                      <div
                        class="tableInfoItem"
                        v-if="!disNumArr.includes(item.name)"
                      >
                        <div class="tableInfoItemName">
                          <div>
                            {{
                              [
                                "特殊专业培训证书",
                                "船船保安员证书",
                                "外籍证书",
                              ].includes(item.name)
                                ? "证件种类"
                                : "证件编号"
                            }}
                          </div>
                          <div>
                            {{
                              [
                                "特殊专业培训证书",
                                "船船保安员证书",
                                "外籍证书",
                              ].includes(item.name)
                                ? "type of Certificate"
                                : "Certificate number"
                            }}
                          </div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ item.number }}</div>
                        </div>
                      </div>
                      <div class="tableInfoItem">
                        <div class="tableInfoItemName">
                          <div>到期日期</div>
                          <div>Due date</div>
                        </div>
                        <div class="tableInfoItemText">
                          <div>{{ item.time }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tableHead">
                  <div class="tableTr pullHead">
                    <div>工作经历</div>
                    <div>PREVIOUS SEA EXPERIENCE</div>
                  </div>
                </div>
                <div class="tableheadName">
                  <div class="tableheadNameItem tableheadNameItem_">
                    <div>船名</div>
                    <div>Ship Name</div>
                  </div>
                  <div class="tableheadNameItem">
                    <div>船型</div>
                    <div>Type</div>
                  </div>
                  <div class="tableheadNameItem tableheadNameItem_">
                    <div>总吨/马力</div>
                    <div>GRT/HP</div>
                  </div>
                  <div class="tableheadNameItem tableheadNameItem_">
                    <div>职务</div>
                    <div>Rank</div>
                  </div>
                  <div class="tableheadNameItem">
                    <div>上船时间</div>
                    <div>Sign on date</div>
                  </div>
                  <div class="tableheadNameItem">
                    <div>下船时间</div>
                    <div>Sign off date</div>
                  </div>
                  <div class="tableheadNameItem tableheadNameItem_">
                    <div>公司名称</div>
                    <div>Company Name</div>
                  </div>
                  <div class="tableheadNameItem">
                    <div>航线</div>
                    <div>Trading Area</div>
                  </div>
                </div>
                <div class="tableBody">
                  <div
                    class="worlItem"
                    :key="index"
                    v-for="(item, index) in formData.resume_experience"
                  >
                    <div class="workTd workTd_">{{ item.cm }}</div>
                    <div class="workTd">{{ item.cx }}</div>
                    <div class="workTd workTd_">
                      {{ item.zd }}/{{ item.ml }}
                    </div>
                    <div class="workTd workTd_">{{ item.zw }}</div>
                    <div class="workTd">{{ item.scsj }}</div>
                    <div class="workTd">{{ item.xcsj }}</div>
                    <div class="workTd workTd_">{{ item.comName }}</div>
                    <div class="workTd">{{ item.hx }}</div>
                  </div>
                </div>
              </div>
            </el-watermark>
          </div>
        </div>
        <iframe
          v-if="navId == 1"
          width="100%"
          height="600px"
          :src="'https://view.xdocin.com/view?src=' + viewItem.file_url"
        ></iframe>
        <div v-show="navId == 2">
          <div class="formDes">
            <div class="desTitle" style="margin-bottom: 15px">
              此船员备选的岗位（{{ total }}）
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column
                prop="position_name"
                show-overflow-tooltip
                label="岗位职务"
              >
                <template #default="{ row }">
                  <span
                    :class="row.enterprise_position_id == 0 ? '' : 'linkText_'"
                    @click="
                      linkFn('workListDetail', row.enterprise_position_id)
                    "
                  >
                    {{ row.position_name }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="watercraft_name"
                show-overflow-tooltip
                label="船名"
              />
              <el-table-column
                prop="workMoney"
                show-overflow-tooltip
                label="岗位月薪"
              >
                <template #default="{ row }">
                  {{ row.unit == 1 ? "¥" : "$" }}{{ row.start_monry }}~{{
                    row.end_monry
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="staff_name"
                show-overflow-tooltip
                label="操作员工"
              >
                <template #default="{ row }">
                  <span
                    :class="row.staff_id == 0 ? '' : 'linkText_'"
                    @click="linkFn('staffListDetail', row.staff_id)"
                  >
                    {{ row.staff_name }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                width="180"
                prop="create_time"
                show-overflow-tooltip
                label="创建时间"
              />
            </el-table>
            <div class="pageCont">
              <el-pagination
                v-model:currentPage="queryData.page"
                v-model:page-size="queryData.per_page"
                background
                layout="total, prev, pager, next, jumper"
                :total="total"
                @size-change="serchFn"
                @current-change="serchFn"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="viewRight">
        <div class="talkHead">
          <div>船员沟通记录（{{ talkTotal }}）</div>
          <btn value="新增沟通记录" @ok="talkFn"></btn>
        </div>
        <div class="talkList">
          <div class="talkItem" :key="index" v-for="(item, index) in talkArr">
            <el-card style="width: 100%" shadow="hover">
              <div class="talkCard">
                <div class="talkText">
                  <div>{{ item.connect_remark }}</div>
                  <div class="delBtn iconfont icon-shanchu"></div>
                </div>
                <div class="talkUnder">
                  <div class="talkTag">{{ item.connect_label }}</div>
                  <div class="talkDes">
                    <div class="talkTime">{{ item.create_time }}</div>
                    <div
                      :class="
                        item.staff_id == 0 ? 'tallStaff' : 'tallStaff linkText_'
                      "
                      @click="linkFn('staffListDetail', item.staff_id)"
                    >
                      {{ item.staff_name }}
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="pageCont">
          <el-pagination
            v-model:currentPage="talkQury.page"
            v-model:page-size="talkQury.per_page"
            background
            size="small"
            layout="total, prev, pager, next"
            :total="talkTotal"
            @size-change="getTalk"
            @current-change="getTalk"
          />
        </div>
      </div>
    </div>
    <el-dialog v-model="showTalk" title="新增船员沟通" width="600">
      <div class="dialogMaskCont">
        <talkForm
          @cancel="showTalk = false"
          @ok="comfirFn"
          :maskItem="maskItem"
        ></talkForm>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.viewMain {
  display: flex;
  .viewLeft {
    width: 200px;
    flex: 1;
  }
  .viewRight {
    width: 350px;
    background-color: #f8f8f8;
    padding: 15px;
    box-sizing: border-box;
    margin-left: 15px;
    border-radius: 5px;
    .talkHead {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      align-items: center;
    }
    .talkList {
      .talkItem {
        margin-bottom: 10px;
        cursor: pointer;
        .talkCard {
          .talkText {
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            .delBtn {
              font-size: 12px;
              cursor: pointer;
              color: #666;
            }
          }
          .talkUnder {
            display: flex;
            align-items: center;
            font-size: 12px;
            justify-content: space-between;
            margin-top: 10px;
            .talkTag {
              padding: 3px 10px;
              background-color: #0071bc;
              color: #fff;
              font-size: 12px;
              border-radius: 3px;
            }
            .talkDes {
              display: flex;
              align-items: center;
              color: #666;
            }
            .tallStaff {
              color: #0071bc;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
.tableCont_ {
  background-color: #fff;
  padding: 15px;
  padding-bottom: 30px;
  box-sizing: border-box;
  border-radius: 5px;
  .flexCont {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.syCont {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
  border: 1px solid #ebebeb;
  .exportTable {
    width: 100%;
    box-sizing: border-box;
    .exportHead {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 100px;
      box-sizing: border-box;
      .logoImg {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        overflow: hidden;
        // background-color: #0071bc;
        border: 3px solid #0071bc;
        img {
          width: 100%;
        }
      }
      .exportHeadInfo {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 80px;
        .exportHeadName {
          font-size: 20px;
          font-weight: bold;
        }
        .englishName,
        .exportHeadAddress {
          font-size: 12px;
        }
      }
    }
    .tableHead {
      background-color: #0071bc;
      display: flex;
      color: #fff;
      padding: 10px 0;
      .tableTr {
        width: 33%;
        text-align: center;
        box-sizing: border-box;
      }
      .tableTr_ {
        width: 34%;
      }
      .hasLeft {
        border-left: 1px solid #fff;
      }
      .pullHead {
        width: 100%;
      }
    }
    .tableheadName {
      width: 100%;
      display: flex;
      text-align: center;
      background-color: #ebf4fa;
      .tableheadNameItem {
        padding: 10px 0;
        font-size: 12px;
        width: 10%;
      }
      .tableheadNameItem_ {
        width: 15%;
      }
    }
    .tableBody {
      width: 100%;
      font-size: 12px;
      .tableleft {
        width: 85%;
        flex: 1;
        .tableTop,
        .tableUnder {
          display: flex;
          flex-wrap: wrap;
          .tableInfoItem {
            width: 33%;
            box-sizing: border-box;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            .tableInfoItemName {
              width: 120px;
              text-align: center;
              padding: 10px 0;
              background-color: #ebf4fa;
            }
            .tableInfoItemText {
              text-align: center;
              flex: 1;
              width: 120px;
            }
          }
          .pullItem {
            width: 66%;
            .tableInfoItemName {
              width: 120px;
            }
          }
          .tableInfoItem_ {
            width: 34%;
          }
          .tableInfoItem_pull {
            width: 67%;
          }
        }
      }
      .tableUserImg {
        width: 15%;
        border-left: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 80%;
        }
      }
      .worlItem {
        width: 100%;
        display: flex;
        text-align: center;
        border-top: 1px solid #ddd;
        .workTd {
          padding: 15px 0;
          width: 10%;
        }
        .workTd_ {
          width: 15%;
        }
      }
    }
    .flexBody {
      display: flex;
    }
    .up_time {
      text-align: center;
      color: #666;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      box-sizing: border-box;
    }
  }
}
</style>
